<template>
    <YvRow align="center">
        <YvRow :span="20" :sm="40" align="center" class="form">
            <span>{{ data.title }} - Powered by 若雨 @ 3097411322</span>
            <YvCol :span="40" :sm="30" v-for="item in data.form">
                <YvInput :type="item.type" :max="item.max" :min="item.min" :required="item.required"
                    v-model="item.model" :ref="item.value" :label="item.name" :placeholder="item.holder" />
            </YvCol>
            <YvCol :span="40" :sm="30" class="btn-group">
                <YvCol :span="20">
                    <YvBtn @click="spawnCdk" color="#FF0000" :reverse="true">生成CDK</YvBtn>
                </YvCol>
                <YvCol :span="20">
                    <YvBtn @click="submit">自助授权</YvBtn>
                </YvCol>
            </YvCol>
            <YvCol id="CDKeySpawned">

            </YvCol>
        </YvRow>
    </YvRow>
</template>

<script>
import item from '@/gameJson/gzxy/item.json'
import { post, get } from '@/js/request'
import clipboard from 'clipboard'
export default {
    data() {
        return {
            data: {
                title: "三国雷霆",
                spawncdk: "/gameCdk/spawnCdk?game=SGLT",
                autoauth: "/autoAuth/lt",
                form: [
                    {
                        name: "账号",
                        type: "input",
                        value: "user",
                        model: null,
                        holder: "请输入账号",
                        required: true,
                    },
                    {
                        name: "CDKey",
                        type: "input",
                        value: "cdk",
                        model: null,
                        holder: "请输入CDKey",
                        required: true,
                    },
                    // {
                    //     name: "区服",
                    //     type: "number",
                    //     value: "cdk",
                    //     model: null,
                    //     max: 2,
                    //     min: 1,
                    //     holder: "请输入区服 1/2",
                    //     required: true,
                    // }
                ]
            },
            form: {
                user: null,
                cdk: null,
                item: null,
            },
            item,
            options: [],
        }
    },
    methods: {
        spawnCdk() {
            get(this.data.spawncdk).then(res => {
                if (res.code == 200) {
                    document.getElementById("CDKeySpawned").innerHTML = `CDKey生成成功：${res.result}`
                    console.log(clipboard);
                    clipboard.write(res.result)
                }
            })
        },
        submit() {
            let data = {};
            let validate = true;
            for (let i in this.data.form) {
                var ref = this.$refs[this.data.form[i].value];
                if (this.data.form[i].required && !this.data.form[i].model) {
                    ref[0].error = "请输入此项";
                    validate = false;
                } else {
                    ref[0].error = null;
                }
                data[this.data.form[i].value] = this.data.form[i].model
            }
            if (!validate)
                return;
            post(this.data.autoauth, data).then(res => {
                console.log(res)
            })
        }
    }
}
</script>

<style scoped>
.form>* {
    margin-top: 15pt;
}

.btn-group * {
    padding: 10pt 5pt;
}
</style>
